<html>
<head>
    <title>Stepper Demo</title>
    
    <!--MOCHAUI-->
    <script type="text/javascript" src="../../../Demo/scripts/mootools-1.3.0-core-nocompat-yc.js"></script>
    <script type="text/javascript" src="../../../Demo/scripts/mootools-1.3.0-more-yc.js"></script>
    <script type="text/javascript" src="../../Core/core.js"></script>
    <script type="text/javascript" src="../column/column.js"></script>
    <script type="text/javascript" src="../panel/panel.js"></script>
    <script type="text/javascript" src="../taskbar/taskbar.js"></script>
    <script type="text/javascript" src="../window/window.js"></script>
    <script type="text/javascript" src="../window/modal.js"></script>
    <!--MOCHAUI-->
    <script type="text/javascript" src="stepper.js"></script>
    <script type="text/javascript" src="stepper.iterator.js"></script>
    <script type="text/javascript">
    
       var Demo = Demo || {};

        var numericStepper = new MUI.Stepper({
            container: 'page1',
            id: 'stepper1',
            value: 0
        });
        
        numericStepper.addEvent('validationFailed', function(value){
            alert('Ooops! Please input intergers only!');
        });
        
        Demo.TimeIterator = new NamedClass('Demo.TimeIterator', {

            Extends: MUI.StepperIterator,
            
            set: function(value) {
                var values = value.match(/^(\d{2}):(\d{2})$/);
                var minutes = values[1].toInt() * 60 + values[2].toInt();
                return this.parent((minutes / 15).toInt());
            },
            
            validate: function(value) {
                if(typeOf(value) !== 'string')
                    return false;
                return value.test(/^\d{2}:\d{2}$/);
            },
            
            current: function() {
                var minutes = this.parent() * 15;
                var h = (minutes / 60).toInt();
                var m = (minutes % 60).toInt();
                h = h < 10 ? '0' + h : h;
                m = m < 10 ? '0' + m : m;
                return h + ':' + m;
            },
            
            hasPrevious: function() {
                return this.index > 0;
            }
        });
        
        var timeStepper = new MUI.Stepper({
            container: 'page2',
            id: 'stepper2',
            formTitle: 'Time',
            value: '00:00',
            iterator: new Demo.TimeIterator()
        });
        
        timeStepper.addEvent('validationFailed', function(value){
            alert('Ooops! Please format your input like HH:MM !');
        });

    </script>
    <link rel="stylesheet" type="text/css" href="../../Themes/default/css/stepper.css"/>

</head>
<body>
    <div id="page1"></div>
    <br/>
    <div id="page2"></div>
</body>
</html>
